<template>
  <je-modal
    v-model:visible="visibleModule"
    width="460px"
    :title="$t('shiftModal.title')"
    :centered="centered"
    class="win-module"
    :confirm-loading="confirmLoading"
    height="auto"
    :resize="false"
    :maximizable="false"
    :buttons="buttonArray"
    @close="cancelModal"
  >
    <je-form layout="vertical" :model="modelRef">
      <je-form-item
        :label="$t('shiftModal.modulLabel')"
        name="SHIFYTABLE_MODULE"
        label-align="top"
        v-bind="validateInfos.SHIFYTABLE_MODULE"
      >
        <je-tree-select
          v-model:value="modelRef.SHIFYTABLE_MODULE"
          :select-options="{ title: '选择模块/资源表' }"
          name="SHIFYTABLE_MODULE"
          config-info="JE_CORE_RESOURCETABLE,SHIFYTABLE_MODULE~SHIFYTABLE_MODULE_ID,text~id,S"
          :querys="getJQuery()"
          :orders="[{ code: 'SY_ORDERINDEX', type: 'ASC' }]"
          @select="selectData"
        />
      </je-form-item>
      <span class="annotation">{{ $t('shiftModal.hint') }}</span>
    </je-form>
  </je-modal>
</template>
<script>
  import { defineComponent, watch, ref, onMounted, reactive, toRaw } from 'vue';
  import { Input, Modal, Button, Form, InputSelect } from '@jecloud/ui';
  import { moveTable } from '../../../api/index';
  import { verifyData } from '../../../helper/common';

  const useForm = Form.useForm;
  export default defineComponent({
    name: 'ModalShift',
    components: {
      JeModal: Modal,
      JeForm: Form,
      JeFormItem: Form.Item,
      JeTreeSelect: InputSelect.Tree,
    },
    props: {
      modalShow: {
        type: Boolean,
        default: false,
      },
      modalData: {
        type: Object,
        default: () => {
          return {};
        },
      },
      productData: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    emits: ['changeData'],
    setup(props, { emit }) {
      //保存模块数据，关闭弹窗
      const visibleModule = ref(props.modalShow);
      const confirmLoading = ref(false);
      const nodeData = ref(props.modalData);
      const modelRef = reactive({
        SHIFYTABLE_MODULE: '',
        SHIFYTABLE_MODULE_ID: '',
      });
      const buttonArray = ref([
        {
          text: '上面',
          type: 'primary',
          handler: ({ $modal, button }) => {
            addModule('above', button, $modal);
            return false;
          },
        },
        {
          text: '下面',
          type: 'primary',
          handler: ({ $modal, button }) => {
            addModule('below', button, $modal);
            return false;
          },
        },
        {
          text: '里面',
          type: 'primary',
          handler: ({ $modal, button }) => {
            addModule('inside', button, $modal);
            return false;
          },
        },
        {
          text: '取消',
          handler: () => {},
        },
      ]);
      const cancelModal = () => {
        visibleModule.value = false;
        emit('changeData', 'cancel');
      };
      const rulesRef = reactive({
        SHIFYTABLE_MODULE: [verifyData.required],
      });
      const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef, {
        onValidate: (...args) => {},
      });
      const addModule = (type, btn, modal) => {
        btn.loading = true;
        validate()
          .then(() => {
            moveTable(
              {
                id: nodeData.value.id,
                toId: modelRef.SHIFYTABLE_MODULE_ID,
                place: type,
                tableCode: 'JE_CORE_RESOURCETABLE',
              },
              { pd: 'meta' },
            )
              .then((obj) => {
                btn.loading = false;
                modal.close();
                Modal.notice(obj.message, 'success');
                emit('changeData', 'add');
              })
              .catch((e) => {
                btn.loading = false;
                Modal.alert(e.message, 'error');
              });
          })
          .catch((error) => {
            btn.loading = false;
          });
        return false;
      };

      //封装j_query
      const getJQuery = () => {
        const j_query = [
          {
            code: 'JE_CORE_RESOURCETABLE_ID',
            type: '!=',
            value: nodeData.value.id,
          },
          {
            code: 'SY_PRODUCT_ID',
            type: '=',
            value: props.productData.productId,
          },
        ];

        return j_query;
      };

      //select事件触发方法
      const selectData = ({ rows }) => {
        //如果转移的是表,并且转移的目标是第一级的模块,按钮就只有里面
        if (nodeData.value.nodeInfo != 'MODULE' && rows && rows[0] && rows[0].parent == 'ROOT') {
          buttonArray.value = [
            {
              text: '里面',
              type: 'primary',
              handler: ({ $modal, button }) => {
                addModule('inside', button, $modal);
                return false;
              },
            },
            {
              text: '取消',
              handler: () => {},
            },
          ];
          return;
        }
        if (rows && rows[0].nodeInfo == 'MODULE') {
          buttonArray.value = [
            {
              text: '上面',
              type: 'primary',
              handler: ({ $modal, button }) => {
                addModule('above', button, $modal);
                return false;
              },
            },
            {
              text: '下面',
              type: 'primary',
              handler: ({ $modal, button }) => {
                addModule('below', button, $modal);
                return false;
              },
            },
            {
              text: '里面',
              type: 'primary',
              handler: ({ $modal, button }) => {
                addModule('inside', button, $modal);
                return false;
              },
            },
            {
              text: '取消',
              handler: () => {},
            },
          ];
        } else {
          buttonArray.value = [
            {
              text: '上面',
              type: 'primary',
              handler: ({ $modal, button }) => {
                addModule('above', button, $modal);
                return false;
              },
            },
            {
              text: '下面',
              type: 'primary',
              handler: ({ $modal, button }) => {
                addModule('below', button, $modal);
                return false;
              },
            },
            {
              text: '取消',
              handler: () => {},
            },
          ];
        }
      };

      return {
        validateInfos,
        resetFields,
        modelRef,
        cancelModal,
        visibleModule,
        addModule,
        nodeData,
        centered: true,
        confirmLoading,
        buttonArray,
        getJQuery,
        selectData,
      };
    },
  });
</script>
<style lang="less" scoped>
  .win-module {
    .annotation {
      color: #aaaaaa;
      line-height: 28px;
      font-size: 14px;
      font-weight: Italic;
      display: inline-block;
      font-style: oblique;
    }
  }
</style>
